<template>
	<view class="ai-dialog">
		<scroll-view 
			class="chat-container" 
			scroll-y="true" 
			:scroll-top="scrollTop" 
			@scrolltoupper="loadMore"
			:style="{ height: scrollHeight + 'px' }"
		>
			<view class="message-list">
				<view v-for="(msg, index) in messages" :key="index" class="message-item">
					<text class="message-time">{{ msg.time || '刚刚' }}</text>
					<view class="message-content" :class="msg.type">
						<image class="avatar" :src="`/static/icons/${msg.type}.png`" />
						<view class="bubble">
							<text class="text">{{ msg.content }}</text>
						</view>
					</view>
				</view>
				<view class="message-item" v-if="loading">
					<view class="message-content ai">
						<image class="avatar" src="/static/icons/ai.png" />
						<view class="bubble loading">
							<text class="text">正在思考中...</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view class="input-area">
			<textarea
				class="input"
				v-model="inputMessage"
				placeholder="请输入您的问题..."
				placeholder-style="color: #999;"
				:disable-default-padding="true"
				:cursor-spacing="10"
				:show-confirm-bar="false"
				auto-height
				@confirm="sendMessage"
			/>
			<button class="send-btn" @tap="sendMessage" :disabled="!inputMessage.trim()">发送</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import  { courseApi }  from '@/utils/api.js'

const inputMessage = ref('')
const messages = ref([
	{
		type: 'ai',
		content: '你好！我是你的 AI 助手，有什么可以帮你的吗？'
	}
])
const scrollTop = ref(0)
const loading = ref(false)
const scrollHeight = ref(0)

// 计算scroll-view高度
const calculateScrollViewHeight = () => {
	const systemInfo = uni.getSystemInfoSync()
	// 获取可使用窗口高度
	const windowHeight = systemInfo.windowHeight
	// 假设输入区域高度为 120px
	const inputAreaHeight = 120
	// 设置scroll-view高度
	scrollHeight.value = windowHeight - inputAreaHeight
}

onMounted(() => {
	calculateScrollViewHeight()
})

// 发送消息
const sendMessage = async () => {
	if (!inputMessage.value.trim() || loading.value) return
	
	const userMessage = inputMessage.value.trim()
	
	// 添加用户消息
	messages.value.push({
		type: 'user',
		content: userMessage,
		time: new Date().toLocaleTimeString()
	})
	
	// 清空输入框
	inputMessage.value = ''
	
	// 滚动到底部
	await nextTick()
	scrollToBottom()
	
	loading.value = true
	
	try { 
		const aiResponse = await courseApi.chatWithAI(userMessage)
		console.log('AI 响应:', aiResponse)
		messages.value.push({
			type: 'ai',
			content: aiResponse.data.aimessage,
			time: new Date().toLocaleTimeString()
		})
		
		// 滚动到底部
		await nextTick()
		scrollToBottom()
	} catch (error) {
		uni.showToast({
			title: error.message || '发送失败，请重试',
			icon: 'none'
		})
	} finally {
		loading.value = false
	}
}

// 滚动到底部
const scrollToBottom = () => {
	setTimeout(() => {
		scrollTop.value = 9999999
	}, 100)
}

// 加载更多历史消息
const loadMore = () => {
	// 实现加载历史消息的逻辑
	console.log('load more')
}
</script>

<style>
page {
	height: 100%;
	background-color: #f0f2f5;
}
</style>

<style scoped>
.ai-dialog {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #f0f2f5;
}

.chat-container {
	flex: 1;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
}

.message-list {
	padding-bottom: 20rpx;
}

.message-item {
	margin-bottom: 30rpx;
}

.message-time {
	display: block;
	font-size: 24rpx;
	color: #999;
	text-align: center;
	margin-bottom: 16rpx;
}

.message-content {
	display: flex;
	align-items: flex-start;
	padding: 0 20rpx;
}

.message-content.user {
	flex-direction: row-reverse;
}

.avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 20rpx;
	flex-shrink: 0;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.bubble {
	position: relative;
	max-width: 60%;
	padding: 24rpx;
	border-radius: 18rpx;
	margin: 0 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.message-content.ai .bubble {
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.message-content.ai .bubble::before {
	content: '';
	position: absolute;
	left: -16rpx;
	top: 24rpx;
	border: 16rpx solid transparent;
	border-right-color: #ffffff;
}

.message-content.user .bubble {
	background: linear-gradient(135deg, #007aff 0%, #0056b3 100%);
}

.message-content.user .bubble::before {
	content: '';
	position: absolute;
	right: -16rpx;
	top: 24rpx;
	border: 16rpx solid transparent;
	border-left-color: #007aff;
}

.text {
	font-size: 28rpx;
	line-height: 1.6;
	word-break: break-all;
}

.message-content.ai .text {
	color: #333;
}

.message-content.user .text {
	color: #ffffff;
}

.input-area {
	background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
	padding: 20rpx 30rpx;
	border-top: 1rpx solid rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: flex-end;
	box-sizing: border-box;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.input {
	flex: 1;
	background-color: #ffffff;
	padding: 20rpx 30rpx;
	border-radius: 36rpx;
	margin-right: 20rpx;
	max-height: 200rpx;
	font-size: 28rpx;
	box-sizing: border-box;
	border: 2rpx solid #e8e8e8;
	transition: all 0.3s ease;
}

.input:focus {
	border-color: #007aff;
	box-shadow: 0 0 10rpx rgba(0, 122, 255, 0.1);
}

.send-btn {
	width: 120rpx;
	height: 70rpx;
	line-height: 70rpx;
	font-size: 28rpx;
	margin: 0;
	background: linear-gradient(135deg, #007aff 0%, #0056b3 100%);
	color: #fff;
	flex-shrink: 0;
	border-radius: 36rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.2);
	transition: all 0.3s ease;
}

.send-btn:active {
	transform: translateY(2rpx);
	box-shadow: 0 2rpx 6rpx rgba(0, 122, 255, 0.2);
}

.send-btn[disabled] {
	background: linear-gradient(135deg, #cccccc 0%, #999999 100%);
	box-shadow: none;
}

.bubble.loading {
	position: relative;
}

.bubble.loading::after {
	content: '';
	position: absolute;
	bottom: 8rpx;
	left: 24rpx;
	width: 6rpx;
	height: 6rpx;
	background: #666;
	border-radius: 50%;
	animation: dotAnimation 1s infinite;
}

@keyframes dotAnimation {
	0%, 100% { opacity: 0; }
	50% { opacity: 1; }
}
</style> 